<template>
    <div>
        <canvas ref="canvasRef" :style="canvasStyle"></canvas>
        <div v-if="debug" class="debug-info">
            Canvas size: {{ width }}x{{ height }}<br>
            Particle count: {{ particles.length }}
        </div>
    </div>
</template>

<script>
import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue';

const SOFT_COLORS = [
    '#1e3a8a', '#1e40af', '#3b82f6', '#60a5fa', '#93c5fd'
];

class Particle {
    constructor(width, height) {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.z = Math.random() * 1000;
        this.size = Math.random() * 20 + 10;
        this.speed = Math.random() + 0.2;
        this.rotation = Math.random() * Math.PI * 2;
        this.rotationSpeed = (Math.random() - 0.5) * 0.01;
        this.color = SOFT_COLORS[Math.floor(Math.random() * SOFT_COLORS.length)];
        this.opacity = Math.random() * 0.2 + 0.1;
    }

    update(width, height) {
        this.z -= this.speed;
        this.rotation += this.rotationSpeed;
        if (this.z < 1) {
            this.z = 1000;
            this.x = Math.random() * width;
            this.y = Math.random() * height;
        }
    }

    draw(ctx, width, height) {
        const scale = 1000 / (1000 - this.z);
        const x = (this.x - width / 2) * scale + width / 2;
        const y = (this.y - height / 2) * scale + height / 2;
        const size = this.size * scale;

        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(this.rotation);
        ctx.globalAlpha = this.opacity;
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.moveTo(-size / 2, -size / 4);
        ctx.lineTo(size / 2, -size / 4);
        ctx.lineTo(size / 3, size / 4);
        ctx.lineTo(-size / 3, size / 4);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
}

export default {
    props: {
        particleCount: {
            type: Number,
            default: 50
        },
        debug: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const canvasRef = ref(null);
        const state = reactive({
            width: window.innerWidth,
            height: window.innerHeight,
            particles: [],
        });

        const canvasStyle = {
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            zIndex: 1,
        };

        let ctx = null;
        let animationFrameId = null;

        const initCanvas = () => {
            const canvas = canvasRef.value;
            if (canvas) {
                ctx = canvas.getContext('2d');
                canvas.width = state.width;
                canvas.height = state.height;
            } else {
                console.error('Canvas element not found');
            }
        };

        const createParticles = () => {
            state.particles = Array.from({ length: props.particleCount }, () => new Particle(state.width, state.height));
        };

        const animate = () => {
            if (!ctx) {
                console.error('Canvas context not available');
                return;
            }

            ctx.clearRect(0, 0, state.width, state.height);
            ctx.fillStyle = '#0f172a';
            ctx.fillRect(0, 0, state.width, state.height);

            state.particles.forEach(particle => {
                particle.update(state.width, state.height);
                particle.draw(ctx, state.width, state.height);
            });

            animationFrameId = requestAnimationFrame(animate);
        };

        const handleResize = () => {
            state.width = window.innerWidth;
            state.height = window.innerHeight;
            if (canvasRef.value) {
                canvasRef.value.width = state.width;
                canvasRef.value.height = state.height;
            }
            createParticles();
        };

        onMounted(() => {
            initCanvas();
            createParticles();
            animate();
            window.addEventListener('resize', handleResize);
        });

        onUnmounted(() => {
            if (animationFrameId) {
                cancelAnimationFrame(animationFrameId);
            }
            window.removeEventListener('resize', handleResize);
        });

        watch(() => props.particleCount, (newCount) => {
            createParticles();
        });

        return {
            canvasRef,
            canvasStyle,
            ...toRefs(state),
        };
    }
};
</script>

<style scoped>
.debug-info {
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    font-family: monospace;
    z-index: 1000;
}
</style>